<template>
  <div id="classroom" :class="{ h5: this.$store.state.webType === 'h5' }">
    <el-row :span="24" class="page">
      <!-- 面包屑 -->
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">{{ $t("home") }} </el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("video") }}</el-breadcrumb-item>
      </el-breadcrumb> -->

      <div class="banner-view">
        <!-- 文字验证 -->
        <div class="verify">
          <!-- 嵌入子组件 -->
          <verify @isOkShow="okOk" :infos="infos" />
        </div>
      </div>
    </el-row>
  </div>
</template>

<script>
import { ref } from "vue";
import HotArticle from "@/components/HotArticle";
import NewBook from "@/components/NewBook";
import goTop from "../components/goTop";
import Verify from "@/components/ver.vue"; // 文字验证
const isVerify = ref(false); // 是否开启文字验证

export default {
  name: "CharacterStory",
  components: {
    goTop,
    HotArticle,
    NewBook,
    Verify,
  },
  data() {
    return {
      videoTitle: "",
      videoUrl: "",
      videoVisible: false,
      currentView: "img",
      timer: null,
      currentBanner: 0,
      currentName: "",
      bannerData: [],
      bannerLabel: [],

      busy: true,
      nomore: false,
      gutterWidth: 20,

      bookData: {},
      // 热点文章
      articleData: [],
      // 当前文章列表展示形式
      currentView: "img",
      // 文章列表
      artData: [],
      // 文章总数量
      listTotal: 0,
      maxPage: 1,
      // 文章列表请求信息
      listQuery: {
        columnId: "",
        labelId: "",
        pageSize: 10,
        pageNum: 1,
      },
      // 标签
      labelData: [],
      currentLabel: "",
    };
  },
  mounted() {
    //  console.log(this.bannerLabel);
    // 窗口改变，重新取得高度
    window.addEventListener("resize", () => {
      clearTimeout(this.resizeFlag);
      this.resizeFlag = setTimeout(() => {
        this.getBannerHeight();
      }, 300);
    });
    /** *******************public***************************** */
    if (this.$route.query.token) {
      sessionStorage.setItem("token", this.$route.query.token);
    }
    // 首次加载时,初始化高度
    this.screenWidth = window.innerWidth;
    this.bannerHeight = (600 / 1920) * this.screenWidth;
    if (this.$store.state.webType === "h5") {
      this.bannerHeight += 50;
    }
    // 窗口大小发生改变
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.bannerHeight = (600 / 1920) * this.screenWidth;
      if (this.$store.state.webType === "h5") {
        this.bannerHeight += 50;
      }
    };
    this.listQuery.columnId = this.$getPartId(this.$route.path);
    this.listQuery.menuId = this.$getMenuId(this.$route.path);
    this.listTotal = 0;
    this.maxPage = 1;
    this.getList();
    this.getBanner();
    this.getLabels();
  },
  methods: {
    async loadMore() {
      // console.log(
      //   "loadMore",
      //   this.busy || this.listQuery.pageNum >= this.maxPage
      // );
      if (this.busy || this.listQuery.pageNum >= this.maxPage) return;
      this.busy = true;
      this.listQuery.pageNum += 1;
      await this.getList();
    },
    async getList() {
      this.$get(`${this.$api}/cms/web/selsctWeb`, this.listQuery).then((res) => {
        this.artData = [...this.artData, ...res.data];
        this.listTotal = res.total;
        this.maxPage = res.maxPage;

        const that = this;
        this.$nextTick(() => {
          that.nomore = true;
          setTimeout(() => {
            that.busy = false;
          }, 300);
        });
      });
    },
    changeLabel(id, label) {
      this.listQuery.labelId = id;
      this.listQuery.pageNum = 1;
      this.currentLabel = label;
      this.artData = [];
      this.getList();
    },
    getLabels() {
      this.$get(`${this.$api}/cms/web/getLabelByPartId`, {
        partId: this.listQuery.columnId,
      }).then((res) => {
        this.labelData = res.data;
      });
    },
    getListMore() {
      this.listQuery.pageNum += 1;
      this.getList();
    },
    viewTypeChange(type) {
      this.artData = [];
      this.listQuery.pageNum = 1;
      this.getList();
      this.currentView = type;
      this.$nextTick(() => {
        this.$redrawVueMasonry();
      });
    },

    handleVideoShow(item) {
      //  console.log(item);
      this.videoVisible = true;
      this.videoTitle = item.title;
      this.videoUrl = item.tvUrl;
    },
    bannerLoop() {
      // this.currentName = "";
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.clickBannerLabel(1);
      }, 5000);
    },
    clickBannerLabel(index) {
      // console.log(index);
      const showDIv = document.querySelector(".showDiv");
      showDIv.classList.remove("showDiv");
      this.bannerLoop();
      const arr = [
        ...[],
        ...this.bannerData.slice(index, this.bannerData.length),
        ...this.bannerData.slice(0, index),
      ];
      const lab = [
        ...[],
        ...this.bannerLabel.slice(index, this.bannerLabel.length),
        ...this.bannerLabel.slice(0, index),
      ];
      //  console.log(arr, lab);
      this.bannerData = arr;
      this.bannerLabel = lab;
      this.currentName = arr[0].bannerName;
      //  console.log(this.currentName);
      this.$forceUpdate;
      setTimeout(() => {
        showDIv.classList.add("showDiv");
      }, 50);
      // this.bannerData.forEach((item, index) => {});
    },
    getBannerHeight() {
      const clientHeight = document.querySelector("#banner-img").height; // 屏幕的高度
      //  console.log(clientHeight);
      this.$refs.labelView.style.height = `${clientHeight}px`;
    },
    getBanner() {
      this.$get(`${this.$api}/cms/web/partArticleBanner`, {
        menuId: this.listQuery.menuId,
      }).then((res) => {
        this.bannerData = res.data;
        this.bannerData.forEach((item, index) => {
          this.bannerLabel.push(item.bannerName);
        });
        this.currentName = res.data[0].bannerName;
        this.bannerLoop();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/card.css";

#classroom {
  position: relative;
  width: 100%;

  &::after {
    // content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url("../assets/images/kt-bg.jpg") no-repeat;
    background-size: 100% auto;
    background-position: center 0;
  }

  .page {
    padding: fh(152vh, pc) fw(80vw, pc) 0 fw(80vw, pc);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.13) 0%, #ffffff 100%);

    ::v-deep .el-breadcrumb {
      // margin-left: fw(-40vw, pc);
      .el-breadcrumb__inner {
        font-weight: bold;
        color: #fff !important;
        font-size: fh(18vh, pc);
      }
    }
  }

  ::v-deep .el-dialog {
    background-color: rgba(0, 0, 0, 0.8);

    .el-button.el-button--default {
      background-color: $zh;
      color: #fff;
      border: none;
    }

    .el-dialog__title,
    .el-dialog__headerbtn .el-dialog__close {
      color: #d6d6d6;
    }
  }

  .showDiv {
    background-color: #fff;
    animation: showDivAni 5s 1;
  }

  .page-content {
    background-color: #fff;
    padding: 0 fw(80vw, pc) fh(40vh, pc) fw(80vw, pc);

    @keyframes showDivAni {
      0% {
        opacity: 0;
      }
      30% {
        opacity: 1;
      }
      100% {
        opacity: 1;
      }
    }

    .art-row {
      display: flex;
      padding-top: fh(40vh, pc);
      width: 100%;

      .book-content {
        background-color: $fh90;
        padding-bottom: fh(40vh, pc);

        .book-btn {
          display: flex;
          width: 100%;
          align-items: flex-end;
          justify-content: center;

          img {
            width: fw(180vw, pc);

            &:hover {
              cursor: pointer;
              opacity: 0.7;
            }
          }
        }

        .book-row {
          display: flex;
          width: 100%;
          padding: fh(46vh, pc) fw(20vw, pc);
          color: $sh;

          img.book-img {
            width: fw(280vw, pc);
          }

          .book-text {
            padding-left: fw(10vw, pc);

            .view-label {
              color: $zh;
              position: relative;
              display: inline-block;
              font-size: fh(24vh, pc);
              font-weight: 800;
              margin-top: fh(20vh, pc);
              margin-bottom: fh(60vh, pc);

              &::after {
                content: "";
                position: absolute;
                bottom: fh(-16vh, pc);
                right: fw(-12vw, pc);
                width: fw(30vw, pc);
                height: fh(18vh, pc);
                border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
                border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
              }
            }

            .text-item {
              padding-bottom: fh(30vh, pc);

              .item-title {
                color: $sh;
                font-size: fh(18vh, pc);
                font-weight: bold;
                padding-bottom: fh(20vh, pc);
              }

              .item-content {
                font-size: fh(16vh, pc);
                line-height: fh(26vh, pc);
              }
            }
          }
        }
      }

      .row-right {
        display: flex;
        flex: 1;
        margin-left: fw(20vw, pc);
        flex-flow: column;

        .hot-article {
          width: 100%;
          padding: fh(30vh, pc) fw(30vw, pc);
          background-color: $fh90;
          margin-top: fh(30vh, pc);

          .article-label {
            color: $zh;
            position: relative;
            display: inline-block;
            font-size: fh(24vh, pc);
            font-weight: 800;
            margin-top: fh(20vh, pc);
            margin-bottom: fh(60vh, pc);

            &::after {
              content: "";
              position: absolute;
              bottom: fh(-16vh, pc);
              right: fw(-12vw, pc);
              width: fw(30vw, pc);
              height: fh(18vh, pc);
              border-right: fw(6vw, pc) solid hsla(14, 74%, 37%, 0.2);
              border-bottom: fw(8vw, pc) solid hsla(14, 74%, 37%, 0.2);
            }
          }

          .article-view {
            color: $sh;

            .article-item {
              width: fw(485vw, pc);
              line-height: fh(26vh, pc);
              margin-bottom: fh(26vh, pc);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;

              span {
                color: $zh;
                font-size: fh(18vh, pc);
                font-weight: bold;
                display: inline-block;
                padding-right: fw(16vw, pc);
              }

              &:hover {
                opacity: 0.8;
                cursor: pointer;
                color: $zh;
              }
            }
          }
        }
      }
    }

    .art-col {
      position: relative;
      width: fw(1180vw, pc);

      .art-tab {
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: fh(30vh, pc);
        color: rgba(0, 0, 0, 0.8);

        .tab-item {
          margin-right: fw(60vw, pc);
          font-size: fh(16vh, pc);
          position: relative;
          line-height: fh(24vh, pc);

          &:hover {
            color: #000;
            cursor: pointer;
          }

          &.active {
            font-size: fh(20vh, pc);
            font-weight: bold;
            color: #000;

            &::before {
              content: "";
              position: absolute;
              bottom: fh(-14vh, pc);
              width: 100%;
              border-top: fh(6vh, pc) solid $zh;
            }
          }
        }

        .tab-info {
          margin-left: auto;
          display: flex;
          align-items: center;

          .toggle-img {
            margin-left: fh(62vw, pc);
            margin-right: fh(24vw, pc);
          }

          img {
            width: fw(20vw, pc);
            cursor: pointer;
          }
        }
      }

      .art-view {
        cursor: pointer;

        &.text {
          .art-item {
            width: 100%;
          }

          .item-title {
            color: $sh;
            display: flex;
            width: 100%;

            .item-info {
              padding-left: fw(40vw, pc);
              margin-left: auto;
              width: max-content !important;

              .info-label {
                margin-right: fw(20vw, pc);
                width: max-content !important;
              }

              .info-time {
                width: max-content;
                margin-left: fw(20vw, pc) !important;
              }
            }
          }
        }

        .art-item {
          // break-inside: avoid;
          width: calc((100% - 40px) / 3);
          margin-bottom: fh(20vh, pc);
          background-color: $dh;

          &:hover {
            opacity: 0.9;
          }

          img {
            width: 100%;
          }

          .art-content {
            width: 100%;
            color: $sh;
            padding: fh(20vh, pc) fw(20vw, pc);
            position: relative;
            z-index: 2;
            background-color: $dh;

            .item-title {
              color: $sh;
              font-size: fh(16vh, pc);
              line-height: fh(20vh, pc);
              margin-bottom: fh(8vh, pc);
              font-weight: 600;
            }

            .item-info {
              display: flex;
              align-items: center;
              width: 100%;
              justify-content: space-between;
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);

              .info-time {
                color: #a1b8bd;
                margin-left: auto;
              }
            }

            .item-content {
              font-size: fh(14vh, pc);
              line-height: fh(20vh, pc);
              font-weight: 400;
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }

      .art-more {
        column-count: 1;
        column-gap: 0;
        width: max-content;
        margin: fh(40vh, pc) auto;
        color: rgba(0, 0, 0, 1);
        font-size: fh(14vh, pc);

        &.true:hover {
          cursor: pointer;
          opacity: 0.8;
          color: $zh;
        }

        &.none {
          opacity: 0.5;
        }
      }
    }
  }

  .banner-view {
    // display: flex;
    // justify-content: space-between;
    // width: fw(1780vw, pc);

    .banner-item {
      flex: 1;

      &:nth-child(2) {
        margin: 0 fw(40vw, pc);
      }

      .scale-view {
        overflow: hidden;
        width: 100%;
        height: fh(600vh, pc);

        img {
          width: 100%;
          min-height: fh(600vh, pc);
        }
      }

      .item-title {
        padding: fh(10vh, pc) fw(20vw, pc);
        background-color: #f6f6f6;
        color: $sh;
        overflow: hidden;
        display: -webkit-box;
        // 下面这句用来控制行数
        line-clamp: 2;
        -webkit-line-clamp: 2;
        height: fh(80vh, pc);
        font-size: fh(20vh, pc);
        line-height: fh(30vh, pc);

        &:hover {
          opacity: 0.8;
          cursor: pointer;
          color: $zh;
        }
      }
    }
  }
}

#classroom.h5 {
  .page {
    // padding-left: 6px;
    // padding-right: 6px;
  }

  .page-content {
    .art-col {
      .view-label {
        font-size: fh(18vh, h5);
        margin-right: fh(40vw, h5);

        img {
          width: fw(22vw, h5);
          bottom: fh(-6vh, h5);
          right: fw(-6vw, h5);
        }
      }

      .art-tab {
        // flex-wrap: wrap;
        .tab-view {
          // margin-top: 20px;
        }
      }
    }

    .art-view {
      padding-bottom: 20px;
      min-height: 240px;

      .art-item {
        width: calc(50% - 10px);

        .item-mins {
          font-size: fh(10vh, h5);
          bottom: fh(3vh, h5) !important;
        }
      }
    }
  }

  .banner-view {
    flex-wrap: wrap;
    width: 100%;

    .banner-item {
      flex: auto;
      width: 100%;
      margin: 0;
      margin-bottom: fh(20vh, h5);

      .scale-view {
        height: auto;

        img {
          min-height: auto;
        }
      }

      .item-title {
        width: 100%;
      }
    }

    .label-view {
      .label-item {
        width: 6vw;
        font-size: fh(10vh, h5);

        &.current {
          font-size: fh(12vh, h5);
        }

        &:nth-child(2) {
          left: 5vw;
          height: 96%;
          top: 2%;
        }

        &:nth-child(3) {
          left: 11vw;
          height: 92%;
          top: 4%;
        }

        &:nth-child(4) {
          left: 17vw;
          height: 88%;
          top: 6%;
        }
      }
    }

    .img-view {
      width: 70vw;

      img {
        height: auto;
        width: 100%;
      }
    }

    .content-view {
      width: 100%;

      .content-title {
        font-size: fh(22vh, h5);
        line-height: fh(30vh, h5);
        height: fh(70vh, h5);
      }
    }
  }
}
</style>
